let data = {
  pagenum: 1, // 第一页
  pagesize: 2, // 每页多少条
  cate_id: "", // 分类id
  state: "", // 分类的状态
}

function getArticleList() {
  $.ajax({
    // 默认是get
    url: "/my/article/list", // 前缀不需要写
    data,
    success: (res) => {
      $("tbody").html(template("table-temp", res)) // 渲染文件列表
      // 渲染分页
      // 因为现在一条数据都没有 所以 先给100 进行一个测试 后面要去掉
      renderPage(res.total) // 渲染分页的方法
    },
  })
}

// 定义一个获取分类的方法
function getArticleCate() {
  $.ajax({
    url: "/my/article/cates", // ajax默认就是类型
    success({ status, message, data }) {
      // status === 0的意味着获取数据成功 否则失败
      if (status === 0) {
        // 如果成功了 要将数据渲染到select的下拉选项
        // data => 动态渲染多个option => arttemplate
        const html = template("option-temp", { data }) // template("模板的ID", 对象) each 对象.属性
        // html要渲染到页面上
        $("select[name=cate_id]").html(html) // 渲染html
        // 将select的内容插入了html => html为什么没有显示？
        // layui-form => 一旦更新了form表单的html => 调用一下form表单的一个方法  render
        layui.form.render("select", "formData") // 渲染方法
      } else {
        layui.layer.msg(message)
      }
    },
  })
}
// 注册事件
function registerEvent() {
  // 监听submit方法
  $("#myForm").on("submit", function (event) {
    // event是事件参数对象
    event.preventDefault() // 阻止默认提交
    // 要获取表单中的数据
    // layui.form.val("lay-filter属性名",  {}) // 取值/赋值
    console.log(layui.form.val("formData"))
    // 拿到了数据 - 覆盖原来参数的两个字段
    // 这是简单的写法

    // data.cate_id = layui.form.val("formData").cate_id
    // data.state = layui.form.val("formData").state
    data = { ...data, ...layui.form.val("formData"), pagenum: 1 } // 将表单中的两个字段 和参数对象进行合并
    // 一旦条件发生改变- 页码回到第一页
    // 再次获取获取数据
    getArticleList() // 再次获取数据
  })
}
// 渲染分页
function renderPage(count) {
  layui.laypage.render({
    // 分页信息
    elem: "myPage", // 指的是 容器的ID 不需要加#
    count, // 当前数据的总数-一般从服务端获取
    limit: data.pagesize, // 每页显示两条 从参数中获取值
    curr: data.pagenum, // 当前处于第几页
    //  jump: function () {}
    jump(obj, first) {
      console.log(obj)
      // obj.curr 就是当前为第几页
      // 获取对应的第几页的数据 ajax请求 => 携带请求第几页的数据
      data.pagenum = obj.curr // 将最新的页码赋值给参数
      // data是最新的页码
      //getArticleList()  // 直接这么写会死循环
      if (!first) {
        // 如果first 为false表示 点击页码切换时 触发 而不是第一次加载时触发
        getArticleList() // 获取文章列表
      }
    },
  })
}
// 删除数据
function delArt(id) {
  layui.layer.confirm("确认删除该数据吗", function () {
    // 直接删除
    $.ajax({
      //  url: `/my/article/info?id=${id}`, vue的接口文档
      url: `/my/article/delete/${id}`,
      success({ status, message }) {
        if (status === 0) {
          // 删除成功重新拉取数据
          data.pagenum = 1 // 因为无法确定当前到底还没有数据
          getArticleList() // 获取文章列表
          layui.layer.closeAll() // 将所有的弹层关闭
        } else {
          layui.layer.msg(message)
        }
      },
    })
  })
}
// renderPage()  只有获取了总数之后 才能渲染分页
registerEvent() // 注册条件提交事件
getArticleCate() // 获取文章分类
getArticleList()
